<template>
  <div class="top" id="topEcharts1"></div>
</template>

<script>
export default {
  name: 'topEcharts1',
  props: {
    projectcompletionscheduleVoList: {
      type: [Object, Array]
    }
  },
  mounted() {
    this.topEcharts1();
  },
  watch: {
    projectcompletionscheduleVoList: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        // console.log('numbers正在被侦听');
        this.topEcharts1();
      }
      // deep: true,
      // immediate: true
    }
  },
  methods: {
    // 深拷贝
    deepCopy(obj) {
      var tempTool = Array.isArray(obj) ? [] : {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          tempTool[key] = typeof obj[key] === 'object'
            ? this.deepCopy(obj[key])
            : Array.isArray(obj) ? Array.prototype.concat(obj[key]) : obj[key];
        }
      }
      return tempTool;
    },
    topEcharts1() {
      let options = this.deepCopy(this.projectcompletionscheduleVoList);
      let leftChart = this.$echarts.init(document.getElementById('topEcharts1'));
      leftChart.setOption({
        xAxis: {
          type: 'value',
          max: 100,
          name: '进度（%）',
          axisLabel: {
            rotate: 0,
            textStyle: {
              color: '#666' // 坐标值得具体的颜色
            }
          },
          interval: 10,
          splitLine: {show: false}, // 去除网格线
          axisTick: {
            // x轴刻度相关设置
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0DCD9A'
            }
          }
        },
        yAxis: {
          type: 'category',
          name: '小组名称',
          // data: ['小组名称1小组名称1', '小组名称1小组名称2', '小组名称1小组名称3', '小组名称1小组名称4', '小组名称1小组名称5', '小组名称1小组名称6', '小组名称1小组名称7', '小组名称1小组名称8', '小组名称1小组名称9', '小组名称1小组名称10'],
          data: options.map(function (item) {
            return item.projectgpName;
          }),
          axisLabel: {
            interval: 0, // 横轴信息全部显示
            rotate: 0, // 倾斜度 -90 至 90 默认为0
            margin: 5, // 刻度标签与轴线之间的距离
            textStyle: {
              color: '#666', // 坐标值得具体的颜色
              fontSize: 12
            }
          },
          nameTextStyle: {
            width: 12
          },
          // interval: 10,
          axisTick: {
            // x轴刻度相关设置
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0DCD9A'
            }
          }
        },
        grid: {
          left: '20%',
          right: '13%',
          bottom: '10%',
          top: '15%'
        },
        series: [
          {
            // data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            data: options.map(function (item) {
              return item.projectSchedule;
            }),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#EEFAF3'
            },
            barWidth: 8,
            // markPoint: { // 标注
            //   // symbol: 'rect',
            //   symbol: 'image://',
            //   symbolKeepAspect: true,
            //   symbolOffset: [0, 0], // 标注偏移设置
            //   symbolSize: [85, 50], // 标注大小
            //   itemStyle: {
            //     color: '#fff',
            //     borderColor: '#f00',
            //     borderWidth: 1,
            //     borderCap: 'round',
            //     shadowBlur: {
            //       shadowColor: 'rgba(0, 0, 0, 0.5)',
            //       shadowBlur: 10
            //     },
            //     shadowColor: 'rgba(255, 0, 0, 0.3)',
            //     shadowOffsetX: 1,
            //     shadowOffsetY: 1
            //   },
            //   label: { // 标注的文本
            //     color: '#59D088', // 文本颜色
            //     fontSize: '12px',
            //     lineHeight: 10,
            //     // distance: 'top',
            //     position: [5, 7] // 文本位置
            //   },
            //   data: [ // 标注内容及位置
            //     { value: `我的等级：${45}`, coord: [4, 60] }
            //   ]
            // },

            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088'];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#39C3E2'
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
</style>
